<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
var data = [82.73, 81.12, 81, 80.56, 80];
var titlename = [
  "西安分公司",
  "榆林分公司",
  "延安分公司",
  "咸阳分公司",
  "汉中分公司"
];
var valdata = [1, 2, 3, 4, 5];
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
import {mapState} from 'vuex'
export default {
  components: {},
  data() {
    return {
      option: {
        title: {
          text: "分公司综合评分排名TOP5",
          // subtext: "违规事件"
        },
        grid: {
          top: "15%",
          bottom: "-10"
        },
        // backgroundColor: '#0e2147',
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            label: {
              fontSize: 30
            },
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 18,
                color: function(value, index) {
                  var num = myColor.length;
                  return myColor[index % num];
                }
              },
              formatter: function(value, index) {
                return ["{title|" + value + "} "].join("\n");
              },
              rich: {}
            }
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 18,
                color: function(value, index) {
                  var num = myColor.length;
                  return myColor[index % num];
                }
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            label: {
              normal: {
                fontSize: 16,
                show: true,
                position: "inside",
                formatter: "{c} 分"
              }
            }
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(['fourItemScoreData'])
  },
  watch: {
    fourItemScoreData: {
      deep: true,
      handler(value){
        console.log('综合值：', value)
        let avg = 0
        let sum = 0
        value.map((ele) => {
          sum += ele.score
        })
        console.log('综合值：', sum/4)
        data.splice(0, 1, (sum/4).toFixed(2))
      }
    }
  },
  mounted() {
    data.sort().reverse()
  },
  methods: {}
};
</script>

<style lang="less">
</style>

